<template>
	<view class="order-wap" style="padding-bottom:200rpx;">
		<view class="o-r-top">
			<view class="wrap">
				<view class="flex top-hei pad-top-20">
					<text class="fs-28 fc-33 ">{{startTime}}</text><text class="h-line"></text>
					<text class="fs-28 fc-33 ">{{endTime}}</text><text class="s-line"></text>
					<text class="fs-28 fc-33 ">共{{dayCount}}晚</text>
				</view>
				<view class="flex top-hei">
					<text class="fs-28 fc-33 ">{{hotelRoomName}}</text><text class="s-line"></text>
					<text class="fs-28 fc-33 ">{{hotelRoomRemark}}</text><text class="s-line"></text>
					<text class="fs-28 fc-33 ">无早餐</text>
				</view>
			</view>
		</view>
		<view class="order-detail mar-top-20" v-if="isUserAuth != 'Y'">
			<view class="wrap">
				<view class="order-in">
					<view class="flex-1 fc-33 fs-32">订单信息</view>
				</view>
				<view class="mar-top-20 input-group">
					<view class="room-main">
						<view class="flex jcsb">
							<text class="title" style="width: 28%;">房间数量</text>
							<view class="input-row-items flex-1 flex" v-if="isContent" @click="toDropdown">
								<text class="flex-1">{{addressData.hotelRoomCount||roomnum}}间</text>
								<text class="yzb yzb-next"  v-if="roomicon1"></text>																					
							</view>
							<view class="input-row-items flex-1 flex" v-else @click="toDropdown">
								<text class="flex-1">{{addressData.hotelRoomCount||roomnum}}间</text>
								<text class="yzb yzb-next upicon" v-if="roomicon2" ></text>					
							</view>
						</view>
						<view class="roomnum flex" v-if="isshow">
							<text @click="selectNum(1)" :class="currentIndex== 1?'active':''">1间</text>
							<text @click="selectNum(2)" :class="currentIndex== 2?'active':''">2间</text>
							<text @click="selectNum(3)" :class="currentIndex== 3?'active':''">3间</text>
							<text @click="selectNum(4)" :class="currentIndex== 4?'active':''">4间</text>
							<text @click="selectNum(5)" :class="currentIndex== 5?'active':''">5间</text>
						</view>
					</view>
					<view v-for="(item,index) in addressData" :key="index" class="form-item">						
						<view class="input-row border-bottom-1px">
							<text class="title">姓名{{index+1}}</text>
							<view class="input-row-item">
								<input v-model="item.hotelRoomStayUserName" class="padding-10" placeholder="每间仅需填1人，可住2人"/>
							</view>
						</view>	
					</view>	
					
					<view class="input-row border-bottom-1px">
						<text class="title">+86</text>
						<view class="input-row-item">
							<input class="padding-10" maxlength="11" type="number" v-model="contactPhone" placeholder="请填写手机号" />
						</view>
					</view>
					<!-- <view class="input-row border-bottom-1px">
						<text class="title">预计到店</text>
						<view class="input-row-item flex-1 flex">
							<picker mode="multiSelector" v-model="expectArriveTime" @change="timeChange" style='width: 30%;'>
								<input class="padding-10" :value="expectArriveTime"  placeholder="到店时间" disabled/>								
							</picker>	
							<text class="yzb yzb-next upicon" style="font-size: 32rpx;top:2rpx;left:-60rpx"></text>	
						</view>
					</view>		 -->						
				</view>
			</view>
		</view>
		<!-- 酒店公寓预定 积分 -->
		<view class="order-detail mar-top-20" v-if="isUserAuth != 'Y'">
			<view class="wrap">				
				<view class="mar-top-20 input-group">				
					<view class="input-row border-bottom-1px">
						<text class="title">积分</text>
						<view class="input-row-item flex">
							<view class="fc-99 flex flex-1" style="align-items: center;">
								-¥<input class="padding-10 flex-1 fc-99" disabled :value="coupondetail.integration||0"/>
							</view>
							<image src="https://web.suqzp.com/public/back.png"></image>
						</view>
					</view>	
					<view class="input-row border-bottom-1px">
						<text class="title">会员抵扣</text>
						<view class="input-row-item">
							<view class="fc-99 flex flex-1" style="align-items: center;">
								-¥
								<input class="padding-10 fc-99" disabled :value="coupondetail.vipAmount||0"/>
							</view>
						</view>
					</view>
					<view class="input-row border-bottom-1px">
						<text class="title">优惠券</text>
						<view class="input-row-item flex">
							<view class="fc-99 flex flex-1" style="align-items: center;">
								-¥
								<input class="padding-10 flex-1 fc-99" disabled :value="coupondetail.couponAmount||0"/>
							</view>
							<image src="https://web.suqzp.com/public/back.png"></image>
						</view>
					</view>								
				</view>
			</view>
		</view>	
		<view class="plains" v-if="isUserAuth != 'Y'">
			<view class="fs-28 fc-66">扣款说明</view>
			<view class="fc-99 fs-24 pad-top-10">入住日18:00前可免费取消，取消后1个工作日内款项退回</view>
		</view>
		<!-- 人才公寓 -->
		<view class="flex mar-top-40">
			<radio-group @change="radioGroup" class="fs-40 fc-33">
				<radio color="#84C0F4" :value="1" :checked="checked" style="transform:scale(0.72);">已同意并同意</radio>
			</radio-group>
			<view class="agreement2 fc-84">《***协议》</view>
		</view>
		<view class="order-footer">
			<view class="flex jcsb foot">
				<view class="left-text fc-33 fs-32">
					在线付<text class="fc-df5 fs-32">￥</text>
					<text class="fc-df5 fs-36">{{coupondetail.realPayTotal}}</text>
				</view>
				<view class="sub-btn" @click="toPay()" v-if="isUserAuth != 'Y'">微信支付</view>
				<view class="sub-btn" @click="toApply()" v-if="isUserAuth == 'Y'">提交申请</view>
			</view>
		</view>  
	</view>
</template>

<script>
	import { throttle } from "@/common/throttle.js"
	export default {		
		data() {
			const currentTime = this.getTime({
				format: true
			})
			return {
				expectArriveTime: currentTime,//到店时间
				bindTimee: currentTime,
				startTime:'',//开始时间
				endTime:'',//结束时间
				dayCount:'',//住宿时间
				weekstart:'',//周几开始
				weekend:'',//周几结束
				hotelTitle:'',//酒店名称
				isContent:true,
				roomicon1:true,//向上箭头
				roomicon2:false,//向下箭头
				isshow:false,
				index:1,//生成表单的索引
				addressData:[],//生成表单所有生成对象的数组,[{},{},{}]
				hotelSubId:'',//酒店分店ID
				hotelRoomId:'',//房间id
				hotelRoomName:'',//房间名称
				hotelRoomNo:'',//房间号
				hotelRoomRemark:'',//房间属性
				promotionPrice:'',//价格
				currentIndex:1,//列表选中下标，默认为0
				roomnum:1,//默认房间数
				contactPhone:'',//联系人手机号
				hotelMan:'',
				coupondetail:'',//优惠券信息
				isUserAuth: 'N', //是否是人才认证的房型
			}
		},
		onLoad(option) {
			this.hotelSubId = option.hotelSubId
			this.promotionPrice = option.promotionPrice
			this.hotelRoomId = option.hotelRoomId
			this.hotelRoomName = option.hotelRoomName
			this.hotelRoomNo = option.hotelRoomNo
			this.hotelRoomRemark = option.hotelRoomRemark
			this.hotelTitle = option.hotelTitle
			this.isUserAuth = option.isUserAuth;
			console.log("this.isUserAuth",this.isUserAuth)
			this.startTime = option.startTime//开始时间
			this.endTime = option.endTime//结束时间
			this.dayCount= option.dayCount//住宿时间
			this.weekstart = option.weekstart
			this.weekend = option.weekend
		},
		mounted() {		
			console.log(this.hotelTitle)
			uni.setNavigationBarTitle({
			　　title:this.hotelTitle
			})
			
			// this.selectNum();
			this.addressData.push({hotelRoomStayUserName: ''});
			this.getUserCoupon()
		},
		methods:{
			//获取用户优惠券积分信息
			async getUserCoupon(){
				var param = {
					xcxOpenId: uni.getStorageSync('openid'),
					hotelRoomId:this.hotelRoomId,
					count: this.roomnum,
					couponId:"",
				}
				let res = await this.$apis.getUserCoupon(param);
				if(res){
					this.coupondetail = res.data
				}
			},
			//预计到店时间		
			timeChange: function(e) {
				this.entryTime = e.detail.value;				
			},			
			//选择入住房间数
			toDropdown(){	
				if(this.isContent == true){
					this.isContent = false
					this.roomicon1 = false
					this.roomicon2 = true
					this.isshow = true
				}else{
					this.isContent = true
					this.roomicon1 = true
					this.roomicon2 = false
					this.isshow = false
				}
				
			},
			selectNum(num){
				this.roomnum = num; //房间、
				this.currentIndex= num;
				this.index++;
				this.addressData = [];				
				for ( let i = 0; i < num; i++ ) {					
				    this.addressData.push({hotelRoomStayUserName: ''});					
				}
				this.getUserCoupon()
				
			},
			//支付
			toPay:throttle(async function() {
				//逗号分隔拼接的字符串数组
				let conveArr = this.addressData.map(d=>{
					 return d.hotelRoomStayUserName
				})
				let param = {
					contactPhone:this.contactPhone,					
					hotelRoomCount:this.roomnum,
					hotelRoomId:this.hotelRoomId,
					hotelSubId:this.hotelSubId,
					hotelMan:conveArr,
					xcxOpenId: uni.getStorageSync('openid'),
					entryTime:this.startTime +' '+ this.bindTimee+":00",//开始
					outTime : this.endTime +' '+ this.bindTimee+":00",//结束时间
					couponId:'',//暂无
					//expectArriveTime:this.expectArriveTime,
				};
					
				if(param.hotelMan == ''){
					uni.showToast({
						title: '请填入住人姓名',
						icon: 'none'
					});
				}else if(param.contactPhone == ''){
					uni.showToast({
						title: '请填写手机号',
						icon: 'none'
					});
				}else if(!(/^1(3|4|5|6|7|8|9)\d{9}$/.test(param.contactPhone))){
					uni.showToast({
						title: '请填写正确的手机号',
						icon: 'none'
					});
				} else{
					let res = await this.$apis.orderPay(param);
					if (res) {						
						var data = res.msg
						if(data == "操作成功") {
							console.log('支付成功',res);
							uni.hideLoading();
							//去订单列表
							setTimeout(() => {
								uni.redirectTo({
									url:'/pages/user/person/user_hotel?status=2'
								})					
							}, 1000);
							return;
						}
						var weChatPayData = JSON.parse(data)
						uni.requestPayment({
							provider: 'wxpay', // 服务提提供商
							appId:weChatPayData.appId,
							timeStamp:weChatPayData.timeStamp, // 时间戳
							nonceStr:weChatPayData.nonceStr, // 随机字符串
							package:weChatPayData.package,
							signType:weChatPayData.signType, // 签名算法
							paySign: weChatPayData.paySign, // 签名
							success: function (res) {
								console.log('支付成功',res);
								setTimeout(function () {uni.hideLoading();}, 100);	
								//去订单列表
								setTimeout(() => {
									uni.redirectTo({
										url:'/pages/user/person/user_hotel?status=1'
									})					
								}, 1000);
							},
							fail: function (err) {
								console.log('支付失败',err);
								uni.redirectTo({
									url:'/pages/user/person/user_hotel?status=0'
								})
							}
						});					
					}
				}
				
			}, 3000),
			// 获取当前时间
			getTime(type) {
				const date = new Date();
				let hour = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
				let minute = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
				return `${hour}:${minute}`;
			},
			// 申请
			async toApply() {
				let param = {				
					hotelRoomCount:1,
					hotelRoomId:this.hotelRoomId,
					hotelSubId:this.hotelSubId,
					xcxOpenId: uni.getStorageSync('openid'),
					entryTime:this.startTime +' '+ this.bindTimee+":00",//开始
					outTime : this.endTime +' '+ this.bindTimee+":00",//结束时间
				};
				let res = await this.$apis.authHotelApply(param);
				if(res) {
					console.log('申请成功',res);
					uni.hideLoading();
					//去订单列表
					setTimeout(() => {
						uni.redirectTo({
							url:'/pages/user/person/user_hotel?status=6'
						})					
					}, 1000);
					return;
				}
			}
			
		}
	}
</script>

<style lang="scss">
page{
	background: #f6f6f6;
	.order-wap{
		.o-r-top{
			height: 116rpx;
			background: #fff;
			.wrap{
				padding-bottom: 0;
				.top-hei{}
				.h-line{
					width: 10rpx;
					height:4rpx;
					background: #dbdbdb;
					position: relative;
					margin: 28rpx 20rpx 0;
				}
				.s-line{
					width: 2rpx;
					height: 26rpx;
					background: #dbdbdb;
					margin: 19rpx 20rpx 0;
				}
			}
		}
		.order-detail{
			background: #fff;
			.wrap{
				padding-bottom: 0;
				.order-in{
					padding: 30rpx 0;				
				}				
				.input-group{
					border-radius: 8rpx;
					.room-main{						
						position: relative;
						background: #fff;						
						.input-row-items{
							width: 586rpx;
							image{
								width: 15rpx;
								height: 32rpx;
								display: block;
							}
							
						}
						.roomnum{
							margin-top: 12rpx;
							text{
								display: block;
								width:125rpx;
								height: 49rpx;
								text-align: center;
								line-height:49rpx;
								color: #333;
								border:1px solid #eee;
								margin-right: 10rpx;
								border-radius: 8rpx;
							}
							.active{
								border-color: #84C0F4;
								color: #84C0F4;
							}
						}
					}
					.border-bottom-1px {
						position: relative;		
						&::after {
							position: absolute;
							z-index: 1;
							right: 0;
							bottom: 0;
							left: 20upx;
							height: 1upx;
							content: '';
							-webkit-transform: scaleY(0.5);
							transform: scaleY(0.5);
							background-color: #e2e2e2;
						}
					}
					
					.input-row {
						display: flex;
						flex-direction: row;
						position: relative;
						background: #fff;
						justify-content: space-between;
						align-items: center;
						box-sizing: border-box;			
						.yzb-next {
							color: $font-color-999;
							text-align: center;
							font-size: 48rpx;
							position: relative;
							top: 13rpx;
						}
						.title {
							width: 25%;
							padding: 20upx 0;
							padding-left:30upx;
							line-height: 50upx;
							color: #333;
						}
						.pickstyle{
							width: 460rpx;
							input{
								font-size: 28rpx;
								text-align: left;
								height: 60rpx;
							}
						}
						.input-row-item {
							width: 568rpx;
							image{
								width: 15rpx;
								height: 32rpx;
								display: block;
								position: relative;
								top: 18rpx;
							}
							.remarktextarea{
								height: 205rpx;
								width: 494rpx;
							}
							input {
								text-align: left;
								font-size: 28rpx;
							}
						}
					}
				}
			}
		}
		.plains{
			padding: 30rpx 32rpx;
		}
		.agreement2{
			position: relative;
			top: 12rpx;
			left: -24px;
			z-index: 1;
		}
		.order-footer{
			height:105rpx;
			background: #fff;
			position: fixed;
			z-index: 1;
			bottom: 0;
			width: 100%;
			padding-bottom: constant(safe-area-inset-bottom);
			padding-bottom: env(safe-area-inset-bottom);
			box-sizing: content-box;
			box-shadow: 0px 0px 6px 1px rgba(0, 0, 0, 0.1607843137254902);
			.foot{
				padding:0 0 0 32rpx;
			}
			.left-text{
				line-height: 105rpx;
			}
			.sub-btn{
				width: 334rpx;
				height: 105rpx;
				background: #84C0F4;
				line-height: 105rpx;
				text-align: center;
				color: #fff;
			}
		}
	}
}
.upicon{
	transform: rotate(90deg);
}
</style>
